<template>
  <el-card class="box-card">
    <div slot="header" class="card-header clearfix">
      <h5 class="title pull-left">{{ renderData.meetingtitle }}</h5>
      <el-button
        type="text"
        icon="el-icon-edit"
        size="small"
        class="btn pull-right"
        @click="toMeetingEdit"
      >编辑</el-button>
    </div>

    <div class="card-wrapper">
      <el-row>
        <el-col :span="18">
          <el-row>
            <el-col :span="12">
              <strong>会议类型：</strong>
              <el-tag effect="plain">{{ renderData.typeName }}</el-tag>
            </el-col>
            <el-col :span="12">
              <strong>参会类型：</strong>
              <el-tag effect="plain">{{ renderData.meetingTypeName }}</el-tag>
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="12"><strong>召开时间：</strong>{{ renderData.begintime }}</el-col>
            <el-col :span="12"><strong>结束时间：</strong>{{ renderData.endtime }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="12"><strong>实际召开时间：</strong>{{ renderData.actualBeginTime }}</el-col>
            <el-col :span="12"><strong>实际结束时间：</strong>{{ renderData.actualEndTime }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="24">
              <strong>会议状态：</strong>
              <el-tag
                v-if="renderData.meetingstatus === 0"
                effect="plain"
              >未开始</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 1"
                effect="plain"
              >未开放预约</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 2"
                effect="plain"
              >已开始</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 3"
                effect="plain"
              >已结束</el-tag>
              <el-tag
                v-else
                effect="plain"
                type="info"
              >暂无</el-tag>
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="4">
              <strong>已上线：</strong>
              <i v-if="renderData.isonline === 1" class="el-icon-check text-success" />
              <i v-else class="el-icon-close text-warning" />
            </el-col>
            <el-col :span="4">
              <strong>可分享：</strong>
              <i v-if="renderData.isshare === 1" class="el-icon-check text-success" />
              <i v-else class="el-icon-close text-warning" />
            </el-col>
            <el-col :span="4">
              <strong>内部测试：</strong>
              <i v-if="renderData.isTest === 1" class="el-icon-check text-success" />
              <i v-else class="el-icon-close text-warning" />
            </el-col>
            <el-col :span="4">
              <strong>HCPE：</strong>
              <i v-if="renderData.isHcpe === 1" class="el-icon-check text-success" />
              <i v-else class="el-icon-close text-warning" />
            </el-col>
            <el-col :span="4">
              <strong>HT：</strong>
              <i v-if="renderData.ht === 1" class="el-icon-check text-success" />
              <i v-else class="el-icon-close text-warning" />
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="12"><strong>会议CODE：</strong>{{ renderData.meetingcode }}</el-col>
            <el-col :span="12"><strong>OM编码：</strong>{{ renderData.omcode }}</el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <div v-if="renderData.meetingtype === 1" class="qrcode-wrapper text-center">
            <h5 class="title">签到二维码</h5>
            <img :src="renderData.signInCodeurl" alt="" class="qrcode-img">
            <p>
              <el-button
                size="mini"
                icon="el-icon-download"
                round
                @click="downloadQr(renderData.signInCodeurl, '签到二维码')"
              >获取二维码</el-button>
            </p>
          </div>
          <div v-else class="qrcode-wrapper text-center">
            <h5 class="title">会议二维码</h5>
            <img :src="renderData.qrCodeUrl" alt="" class="qrcode-img">
            <p>
              <el-button
                size="mini"
                icon="el-icon-download"
                round
                @click="downloadQr(renderData.qrCodeUrl, '会议二维码')"
              >获取二维码</el-button>
            </p>
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="9"><strong>省份城市：</strong>{{ renderData.province }} {{ renderData.city }}</el-col>
        <el-col :span="15"><strong>召开地点：</strong>{{ renderData.location }}</el-col>
      </el-row>
      <el-divider v-if="renderData.meetingtype === 2" />
      <el-row v-if="renderData.meetingtype === 2">
        <el-col :span="24">
          <strong>会议直播：</strong>
          <router-link
            :to="`/live-broadcasts/edit/${renderData.livebroadcastid}`"
          >{{ renderData.livebroadcasttitle }}</router-link>
        </el-col>
      </el-row>
      <el-divider v-if="renderData.meetingtype === 2" />
      <el-row v-if="renderData.meetingtype === 2">
        <el-col :span="24"><strong>直播链接：</strong>{{ broadcastUrl }}</el-col>
      </el-row>
      <el-divider />
      <!-- <el-row>
        <el-col :span="12"><strong>所属会议：</strong>{{ renderData.parentmeetingName }}</el-col>
        <el-col :span="12"><strong>关联会议：</strong>{{ renderData.relatedmeetingName }}</el-col>
      </el-row>
      <el-divider /> -->
      <el-row v-if="!_.isEmpty(renderData.lecturer)">
        <el-col :span="24">
          <strong>讲师姓名：</strong>
          <span
            v-for="(item, index) in renderData.lecturer"
            :key="index"
          >{{ item }}<el-divider v-if="index !== renderData.lecturer.length - 1" direction="vertical" /></span>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.lecturer)" />
      <el-row v-if="!_.isEmpty(renderData.buList)">
        <el-col :span="24">
          <strong>BU：</strong>
          <el-tag
            v-for="item in renderData.buList"
            :key="item.id"
            effect="plain"
          >{{ item.bu }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.buList)" />
      <el-row v-if="!_.isEmpty(renderData.taList)">
        <el-col :span="24">
          <strong>TA：</strong>
          <el-tag
            v-for="item in renderData.taList"
            :key="item.id"
            effect="plain"
          >{{ item.ta }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.taList)" />
      <el-row v-if="!_.isEmpty(renderData.brand)">
        <el-col :span="24">
          <strong>相关产品（代表可见）：</strong>
          <el-tag
            v-for="item in renderData.brand"
            :key="item.id"
            effect="plain"
          >{{ item.brand }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.brand)" />
      <el-row v-if="!_.isEmpty(renderData.depart)">
        <el-col :span="24">
          <strong>目标科室（医生可见）：</strong>
          <el-tag
            v-for="item in renderData.depart"
            :key="item.id"
            effect="plain"
          >{{ item.name }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.depart)" />
      <el-row v-if="!_.isEmpty(renderData.userType)">
        <el-col :span="24">
          <strong>测试用户组：</strong>
          <el-tag
            v-for="item in renderData.userType"
            :key="item.id"
            effect="plain"
          >{{ item.name }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.userType)" />
      <el-row v-if="!_.isEmpty(renderData.thirdUrl)">
        <el-col :span="24"><strong>活动页面地址：</strong>{{ renderData.thirdUrl }}</el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.thirdUrl)" />
      <el-row v-if="!_.isEmpty(renderData.meetingdesc)">
        <el-col :span="24"><strong>会议简介：</strong>{{ renderData.meetingdesc }}</el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.meetingdesc)" />
      <el-row>
        <el-col :span="16">
          <p><strong>会议封面：</strong></p>
          <p><img :src="renderData.coverurl" alt="" class="cover-img"></p>
        </el-col>
        <el-col :span="8">
          <p><strong>分享图标：</strong></p>
          <p><img :src="renderData.icon" alt="" class="share-icon"></p>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-form label-position="top" label-width="100px" class="meeting-form">
          <el-col :span="16">
            <el-form-item label="相关操作：">
              <el-button
                type="warning"
                icon="el-icon-bell"
                size="small"
                plain
                :loading="onlineBtnLoading"
                :disabled="onlineBtnLoading"
                @click="tweetOnline"
              >{{ tweetOnlineTxt }}</el-button>
              <el-divider direction="vertical" />
              <el-button
                type="success"
                icon="el-icon-bell"
                size="small"
                plain
                :loading="startBtnLoading"
                :disabled="startBtnLoading"
                @click="tweetStart"
              >{{ tweetStartTxt }}</el-button>
              <el-divider direction="vertical" />
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                @click="removeMeeting"
              >删除会议</el-button>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="2">
            <el-form-item label="会议开关" prop="isOpen" class="text-center">
              <el-switch
                v-model="isOpen"
                :active-value="1"
                :inactive-value="0"
                @change="switchOpen"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="2">
            <el-form-item label="招募展示" prop="isIgskShow">
              <el-switch
                v-model="isIgskShow"
                :active-value="1"
                :inactive-value="0"
                @change="switchIgskShow"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="互动日程展示" prop="isScheduleShow">
              <el-switch
                v-model="isScheduleShow"
                :active-value="1"
                :inactive-value="0"
                @change="switchScheduleShow"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import {
  getMeetingShow,
  tweetMeetingOnline,
  tweetMeetingStart,
  updateOpen,
  updateShow,
  updateScheduleShow,
  removeMeeting
} from '@/api/meetings'

export default {
  name: 'MeetingDetail',
  props: {
    meetingId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      renderData: {},
      broadcastUrl: '',
      isOpen: 0,
      isIgskShow: 1,
      isScheduleShow: 1,
      onlineBtnLoading: false,
      tweetOnlineTxt: '会议上线提醒',
      tweetOnlineCountDown: 60,
      startBtnLoading: false,
      tweetStartTxt: '会议开始提醒',
      tweetStartCountDown: 60
    }
  },
  created() {
    this.fetchData(this.meetingId)
  },
  methods: {
    fetchData(id) {
      getMeetingShow({ id }).then(response => {
        const { data } = response
        // console.log(data)
        this.renderData = data
        this.isOpen = data.isOpen
        this.isIgskShow = data.isShow
        this.isScheduleShow = data.meetingSchedule

        let broadcastUrl = ''
        if (data.platformId === 1) {
          // 微吼
          broadcastUrl = `${data.livebroadcasturl}${data.channeId}`
        } else if (data.platformId === 2) {
          // 会畅
          broadcastUrl = `${data.livebroadcasturl}?id=${data.channeId}`
        } else if (data.platformId === 3) {
          // STC
          broadcastUrl = `${data.livebroadcasturl}?id=${data.channeId}`
        }
        this.broadcastUrl = broadcastUrl
        this.$emit('getMeetingData', { data })
      }).catch(err => {
        console.log(err)
      })
    },
    toMeetingEdit() {
      this.$router.push(`/meetings/edit/${this.meetingId}`)
    },
    tweetOnline() {
      this.$confirm('确认发送会议上线提醒?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onlineBtnLoading = true
        tweetMeetingOnline({
          meetingId: this.meetingId
        }).then(response => {
          // console.log(response)
          this.$message({
            type: 'success',
            message: '提醒成功!'
          })

          const tweetOnlineTimer = window.setInterval(() => {
            this.tweetOnlineCountDown -= 1
            this.tweetOnlineTxt = `会议上线提醒 ${this.tweetOnlineCountDown}s`
            if (this.tweetOnlineCountDown < 0) {
              window.clearInterval(tweetOnlineTimer)
              this.tweetOnlineTxt = '会议上线提醒'
              this.tweetOnlineCountDown = 60
              this.onlineBtnLoading = false
            }
          }, 1000)
        }).catch(err => {
          console.log(err)
          this.onlineBtnLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发送'
        })
      })
    },
    tweetStart() {
      this.$confirm('确认发送会议开始提醒?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.startBtnLoading = true
        tweetMeetingStart({
          meetingId: this.meetingId
        }).then(response => {
          // console.log(response)
          this.$message({
            type: 'success',
            message: '提醒成功!'
          })

          const tweetStartTimer = window.setInterval(() => {
            this.tweetStartCountDown -= 1
            this.tweetStartTxt = `会议开始提醒 ${this.tweetStartCountDown}s`
            if (this.tweetStartCountDown < 0) {
              window.clearInterval(tweetStartTimer)
              this.tweetStartTxt = '会议开始提醒'
              this.tweetStartCountDown = 60
              this.startBtnLoading = false
            }
          }, 1000)
        }).catch(err => {
          console.log(err)
          this.startBtnLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发送'
        })
      })
    },
    removeMeeting() {
      this.$confirm('此操作将永久删除该会议, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeMeeting({
          meetingId: this.meetingId
        }).then(response => {
          // console.log(response)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$router.replace('/meetings/list?page=1')
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    switchOpen() {
      updateOpen({
        meetingId: this.meetingId,
        isOpen: this.isOpen
      }).then(response => {
        // console.log(response)
        this.$message({
          type: 'success',
          message: '设置成功!'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    switchIgskShow() {
      updateShow({
        meetingId: this.meetingId,
        isShow: this.isIgskShow
      }).then(response => {
        // console.log(response)
        this.$message({
          type: 'success',
          message: '设置成功!'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    switchScheduleShow() {
      updateScheduleShow({
        meetingId: this.meetingId,
        meetingSchedule: this.isScheduleShow
      }).then(response => {
        // console.log(response)
        this.$message({
          type: 'success',
          message: '设置成功!'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    downloadQr(qrAddress, title) {
      const link = document.createElement('a')
      link.href = qrAddress
      link.download = `${this.renderData.meetingtitle} - ${title}`
      link.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.cover-img {
  height: 200px;
  max-width: 100%;
}
.qrcode-wrapper {
  .title {
    margin: 0;
  }
}
.qrcode-img {
  width: 200px;
  max-width: 100%;
}
.share-icon {
  height: 200px;
  max-width: 100%;
}
</style>
